<template>
  <div>
    <!-- 部门选择 -->
    <div style="margin: 14px;">
      <el-select v-model="currentDepartment" filterable size="mini" placeholder="请选择部门" @change="onChange">
        <el-option
          v-for="item in schoolDepartment"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div v-loading="is_requestData" style="background: #FFFFFF;margin: 14px;padding: 14px;">
      <!-- 课程准入数据 -->
      <div class="flex_center_align" style="margin: 0 0 20px 0;">
        <div style="background: #1B71F1;width: 5px;height: 20px;border-radius: 5px;" />
        <div style="color: #303133;font-size: 18px;padding-left: 5px;">课程准入数据</div>
      </div>
      <div class="flex_center_align" style="position: relative;">
        <div style="width: 100px;">
          <el-image
            style="width: 100px; height: 100px;"
            :src="require('../../../assets/new.png')"
            fit="scale-down"
          />
          <span style="display: inline-block;position: absolute;top: 25px;left: 0;z-index: 2;width: 100px;color: #F21029;font-size: 26px;font-weight: bold;text-align: center;">{{ oldEvaluationData.statistical.statistical_data.total }}</span>
          <span style="display: inline-block;position: absolute;bottom: 10px;left: 5px;z-index: 2;width: 90px;color: #FFFFFF;font-size: 14px;text-align: center;color: #FFFFFF;">{{ '本学期课程准入总数' }}</span>
        </div>
        <div class="" style="width: calc(100% - 100px);padding-left: 14px;">
          <div v-for="(count_data, count_data_index) in oldEvaluationData.statistical.statistical_data.count_data" :key="count_data_index" style="display: inline-block;" :style="{ 'width': (100 / oldEvaluationData.statistical.statistical_data.count_data.length) + '%' }">
            <div style="margin: 0 7px;border-radius: 4px;background: rgb(235, 238, 245, 0.6);height: 80px;padding: 10px 12px">
              <router-link :to="count_data.path">
                <div style="text-align: center;color: #303133;font-size: 18px;">{{ count_data.count }}</div>
                <div style="text-align: center;color: #606266;padding-top: 4px;font-size: 16px;">{{ count_data.title }}</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex_between" style="background: #FFFFFF;margin: 14px;padding: 14px;">
      <div style="width: 48%;">
        <div class="flex_center_align" style="margin: 0 0 20px 0;">
          <div style="background: #1B71F1;width: 5px;height: 20px;border-radius: 5px;" />
          <div style="color: #303133;font-size: 18px;padding-left: 5px;">课程准入历史数据</div>
        </div>
        <div id="old_evaluation_data_line" v-loading="is_requestData" style="width: 100%;height:50vh;" />
      </div>
      <div style="width: 48%;">
        <div class="flex_center_align" style="margin: 0 0 20px 0;">
          <div style="background: #1B71F1;width: 5px;height: 20px;border-radius: 5px;" />
          <div style="color: #303133;font-size: 18px;padding-left: 5px;">课程准入进度比例统计</div>
        </div>
        <div id="old_evaluation_data_bar" v-loading="is_requestData" style="width: 100%;height:50vh;" />
      </div>
    </div>

    <div v-loading="is_requestData" style="background: #FFFFFF;margin: 14px;padding: 14px;">
      <div class="flex_center_align" style="margin: 0 0 20px 0;">
        <div style="background: #1B71F1;width: 5px;height: 20px;border-radius: 5px;" />
        <div style="color: #303133;font-size: 18px;padding-left: 5px;">课程等级评比统计</div>
      </div>
      <div class="flex_between">
        <div v-if="oldEvaluationData.agree_count.total_agree.center_expert.length" class="flex_between" style="width: 100%;background: linear-gradient(270deg, rgba(255,255,255,0.3) 0%, #E9F0FF 100%);padding: 20px 0;">
          <div style="width: 33.33%;">
            <div style="width: 100%;display: inline-block;">
              <div style="text-align: center;font-size: 20px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[0].count_agree }}</div>
              <div style="text-align: center;font-size: 16px;padding-top: 10px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[0].title }}</div>
            </div>
          </div>
          <div style="width: 33.33%">
            <div style="width: 100%;display: inline-block;">
              <div style="text-align: center;font-size: 20px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[1].count_disagree }}</div>
              <div style="text-align: center;font-size: 16px;padding-top: 10px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[1].title }}</div>
            </div>
          </div>
          <div style="width: 33.33%">
            <div style="width: 100%;display: inline-block;">
              <div style="text-align: center;font-size: 20px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[2].count_reviewing }}</div>
              <div style="text-align: center;font-size: 16px;padding-top: 10px;">{{ oldEvaluationData.agree_count.total_agree.center_expert[2].title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="" style="background: #FFFFFF;margin: 14px;padding: 14px;">
      <el-table
        v-loading="is_requestData"
        :header-cell-style="{color:'#000000'}"
        :data="oldEvaluationData.agree_count.total_agree_detail"
        border
        fit
        highlight-current-row
        :cell-style="{ padding: 0 }"
      >
        <el-table-column label="开课单位" prop="department_name">
          <template slot-scope="{row}">
            <div style="padding: 10px 0;">{{ row.department_name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="同意" align="center">
          <template slot-scope="{row}">
            <div style="display: inline-block;text-align: center;">{{ row.total_agree[0].count_agree }}</div>
          </template>
        </el-table-column>
        <el-table-column label="不同意" align="center">
          <template slot-scope="{row}">
            <div style="display: inline-block;text-align: center;">{{ row.total_agree[1].count_disagree }}</div>
          </template>
        </el-table-column>
        <el-table-column label="评审中" align="center">
          <template slot-scope="{row}">
            <div style="display: inline-block;text-align: center;">{{ row.total_agree[2].count_reviewing }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { get } from '@/api/request'

export default {
  name: 'NewCourseEvaluation',
  components: { },
  data() {
    return {
      is_requestData: false,
      currentDepartment: 'all',
      oldEvaluationData: {
        agree_count: {
          total_agree: {
            center_expert: []
          },
          total_agree_detail: []
        },
        statistical: {
          bar: {
            horizontal_axis_tag: [],
            process_data: []
          },
          datetime: [],
          line: [],
          statistical_data: {
            count_data: [],
            total: 0
          }
        }
      },
      schoolDepartment: [
        {
          label: '全部',
          value: 'all'
        }
      ]
    }
  },
  computed: { },
  mounted() {
    this.upData()
  },
  destroyed() { // 销毁实例解决图标未初始化完成快速切换出现错误
    this.initEchart()
  },
  methods: {
    upData() {
      this.initEchart()
      this.requestData()
    },
    initEchart() {
      if (document.getElementById('old_evaluation_data_line')) echarts.init(document.getElementById('old_evaluation_data_line')).dispose()
      if (document.getElementById('old_evaluation_data_bar')) echarts.init(document.getElementById('old_evaluation_data_bar')).dispose()
    },
    onChange(e) {
      this.currentDepartment = e
      this.requestData()
    },
    async requestData() {
      this.is_requestData = true
      await get(`dashboard/new/course/evaluation/statistic`, this.currentDepartment === 'all' ? {} : { department_id: this.currentDepartment }).then(response => {
        if (response.code === 0) {
          this.oldEvaluationData = response.data
          this.setEchartLine(response.data.statistical.line, response.data.statistical.datetime, 'old_evaluation_data_line')
          this.setEchartBar(response.data.statistical.bar.horizontal_axis_tag, response.data.statistical.bar.process_data, 'old_evaluation_data_bar')
        }
        this.is_requestData = false
      })
      await get(`departments`, {}, { all: 1 }).then(response => {
        if (response.code === 0) {
          response.data.forEach(item => {
            this.schoolDepartment.push({
              label: item.name,
              value: JSON.stringify(item.id)
            })
          })
        }
      })
    },
    async setEchartBar(horizontal_axis_tag, process_data, type) {
      if (!echarts) return
      var myChart = echarts.init(document.getElementById(type))
      const option = {
        title: {
          // text: '第一个 ECharts 实例'
        },
        tooltip: {},
        xAxis: {
          data: horizontal_axis_tag
        },
        yAxis: {
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [{
          type: 'bar',
          barWidth: 24,
          data: process_data,
          itemStyle: {
            normal: {
              color: function(params) {
                // 注意，多写点颜色，否则process_data 长度大于 定义数组长度时无效
                const colorList = ['#3240FF', '#3C91FF', '#6FE7FD', '#21E8C5', '#AF78F9', '#F68434', '#FBCE3C', '#3240FF', '#3C91FF', '#6FE7FD', '#21E8C5', '#AF78F9', '#F68434', '#FBCE3C']
                return colorList[params.dataIndex]
              }
            }
          }
        }]
      }
      myChart.setOption(option)
    },
    // 设置数据统计图【教秘、管理端】
    async setEchartLine(count, datetime, type) {
      if (!echarts) return
      var myChart = echarts.init(document.getElementById(type))
      const option = {
        title: {
          // text: '课程评价参评数据'
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          // data: ['销量']
        },
        xAxis: {
          data: datetime
        },
        yAxis: {},
        series: count
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
